<template>
  <el-card class="content-header" shadow="never">
    <template #header>
      <span class="content-header-title">{{ props.title }}</span>
      <slot name="title"></slot>
    </template>
    <div class="content-header-description">
      <div v-if="props.description !== ''">{{  props.description  }}</div>
      <slot></slot>
    </div>
  </el-card>
</template>

<script setup lang="ts">
interface Props {
  title: string
  description?: string
}

const props = withDefaults(defineProps<Props>(), {
  description: ''
})
</script>

<style lang="less">
.content-header{
  margin-bottom: 10px;

  .content-header-title{
    margin-right: 20px;
  }
  .content-header-description{
    padding-left: 20px;
    font-size: 14px;
  }
}
</style>